<template>
    <div class="driver-registration">
        <div class="header">
            <div class="title">司机注册</div>
            <div class="subtitle">请填写以下信息以完成注册</div>
        </div>
        <van-form @submit="onSubmit" class="registration-form">
            <van-field v-model="driver.vehiclePlate" name="vehiclePlate" label="车辆牌照" placeholder="请输入车辆牌照"
                class="form-field" />

            <van-field v-model="driver.vehicleModel" name="vehicleModel" label="车辆型号" placeholder="请输入车辆型号"
                class="form-field" />

            <van-field v-model="driver.vehicleType" name="vehicleType" label="车辆类型" placeholder="请输入车辆类型"
                class="form-field" />

            <van-field v-model="driver.vehicleColor" name="vehicleColor" label="车辆颜色" placeholder="请输入车辆颜色"
                class="form-field" />

            <van-button type="primary" @click="onSubmit" round color="var(--gradient-primary)" class="custom-button">
                提交注册
            </van-button>
        </van-form>
    </div>
</template>

<script setup>
    import {
        ref,
        onMounted
    } from 'vue';
    import {
        showToast
    } from 'vant';
    import {
        UserControllerService
    } from '../../api/services/UserControllerService';
    import {
        DriverControllerService
    } from '../../api/services/DriverControllerService';
    import {
        useRouter
    } from 'vue-router';
    const router = useRouter();

    // 初始化司机信息
    const driver = ref({
        userId: '',
        vehiclePlate: '',
        vehicleModel: '',
        vehicleType: '',
        vehicleColor: '',
        rating: '5.0',
    });

    onMounted(async () => {
        try {
            const token = localStorage.getItem('token');
            if (token) {
                const res = await UserControllerService.getIdByToken(token);
                driver.value.userId = res.data;
            } else {
                console.error('未获取到有效的 token');
            }
        } catch (error) {
            console.error('获取用户 ID 失败:', error);
        }
    });

    // 提交表单处理
    const onSubmit = async () => {
        try {
            const res = await DriverControllerService.addDriver(driver.value);
            console.log(res);
            if (res.code === 0) {
                showToast({
                    message: '注册信息已提交，请等待审核',
                    type: 'success'
                });
                router.push({
                    name: "Personal"
                });
            }
        } catch (error) {
            console.log('注册信息提交失败:', error);
            showToast({
                message: error.message,
                type: 'error'
            });
        }
    };
</script>

<style lang="scss" scoped>
    @use '../style.scss' as *;

    body {
        background: var(--gradient-primary);
    	min-height: 100vh; /* 确保body占据整个视口高度 */
    	margin: 0; /* 移除默认边距 */
		display: flex;
    	justify-content: center; /* 水平居中 */
    	align-items: center; /* 垂直居中 */
    }

    

    .driver-registration {
        max-width: 600px;
        margin: 5vh auto; 
        padding: 3rem 3rem;
        border-radius: 1rem;
        background-color: rgba(255, 255, 255);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        animation: fadeIn 0.5s ease-out ;
    }
	/* 响应式外边距控制（仅调整左右间距，不影响居中） */
	@media (max-width: 1200px) {
	    .driver-registration {
	        margin: 5vh 10%; /* 大屏幕下添加10%外边距 */
	    }
	}
	
	@media (max-width: 768px) {
	    .driver-registration {
	        margin: 5vh 7%; /* 中等屏幕7%外边距 */
	    }
	}
	
	@media (max-width: 576px) {
	    .driver-registration {
	        margin: 5vh 5%; /* 小屏幕5%外边距 */
	    }
	}
	
	@media (max-width: 390px) {
	    .driver-registration {
	        margin: 5vh 3%; /* 超小屏幕3%外边距 */
	    }
	}
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .header {
        text-align: center;
        margin-bottom: 3rem;

        .title {
            font-size: 2.5rem;
            font-weight: 800;
            color: #34495e;
            margin-bottom: 1.5rem;
        }

        .subtitle {
            font-size: 1.25rem;
            color: #95a5a6;
        }
    }

    .form-field {
        margin-bottom: 1.5rem;
    }

    .van-field {
        border: 2px solid #e0e0e0;
        border-radius: 0.5rem;
        transition: all 0.3s ease;

        &:focus-within {
            border-color: orange; // 聚焦时边框变为橙色
        }
    }

    .custom-button {
        font-size: 1.125rem;
        padding: 0.8rem 1.5rem;
        width: 100%; // 直接使用100%宽度匹配输入框
        margin: 0; // 移除边距确保完全对齐
        transition: all 0.2s ease;
        
        &:hover {
            transform: translateY(-2px);
            background-color: darkorange; // 悬停时按钮变为深橙色
        }
    }

    .example-tip {
        display: flex;
        align-items: center;
        color: #95a5a6;
        font-size: 0.875rem;
        margin-bottom: 1.5rem;
        padding-left: 2rem;

        .iconfont {
            margin-right: 0.5rem;
            color: orange; // 图标颜色改为橙色
        }
    }
</style>